<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台管理界面</title>
    <script src="../js/vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="../ele-2.15.7/index.js"></script>
</head>
<body>
<div id="app">
  <el-container>
    <el-header><h1 style="line-height: 20px;text-align: center">XXXX后台管理系统</h1></el-header>
    <el-container>
      <el-aside style="width: 180px">
          <el-menu  style="width: 179px;" @select="selectMenu"
                  default-active="2"
                  class="el-menu-vertical-demo">
            <el-menu-item v-for="menu in menus" :index="menu.name" >
              <i class="el-icon-location"></i>
              <span>{{menu.name}}</span>
            </el-menu-item>
          </el-menu>

      </el-aside>
      <el-main>
        <el-tabs v-model="currentTab" type="border-card" style="height: 100%" editable >
          <el-tab-pane v-for="tab in tabs" :label="tab.name"
          :key="tab.name" :name="tab.name" >
            <iframe :src="tab.url" style="height: 100%;width: 100%"></iframe>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
    <el-footer>页脚</el-footer>
  </el-container>
</div>
<script>
  var v = new Vue({
    el:"#app",
    data:{
      menus:[
        {name:"布局管理",url:"Layout.html"},
        {name:"分页控件",url:"../vue/d0311/分页条.html"},
        {name:"折叠面板",url:"../vue/d0311/折叠面板.html"},
        {name:"分页查询",url:"../vue/d0312/分页查询.html"},
        {name:"图片管理",url:"../ElementUI/图书管理.html"},
      ],
      tabs:[ ],
      currentTab:""
    },
    methods:{
      selectMenu(name){
        //查找是否已经打开页
        let tab = this.tabs.find(tab=>{
          if (tab.name == name){
            return tab;
          }
        });
        //如果tab 不是undefined 则一打开tab
        if (tab){
          this.currentTab = name;
          return;
        }
        //在菜单数组中查找菜单对象
        this.menus.forEach(menu=>{
          if (menu.name == name ){
            this.tabs.push({
              name:name,
              url:menu.url
            });
            this.currentTab = name;
          }
        });
      }
    }
  });
</script>
</body>
</html>
<style type="text/css">
  html,body,#app{
    height: 100%;
    padding: 0px;
    margin: 0px;
  }
  iframe{
      border: none;
  }
  .el-container{
    height: 100%;
    /*width: 100%;*/
  }
  /*.el-header{*/
  /*  background-color: #eee;*/
  /*}*/
  /*.el-main{*/
  /*  background-color: #ddd;*/
  /*}*/
  /*.el-footer{*/
  /*  background-color: #ccc;*/
  /*}*/
  /*.el-aside{*/
  /*  background-color: #bbb;*/
  /*}*/

  .el-tabs__content{
    height: calc(100% - 68px);
  }
  .el-tab-pane{
    height: 100%;
  }
</style>